import 'package:flutter/material.dart';

// 定义有状态组件
// 快捷键：fstfull，得安装插件：Flutter Widget Snippets
class HomePage11_3 extends StatefulWidget {
  const HomePage11_3({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage11_3> {
  // 状态变量
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView组件', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.blue,
      ),

      // 3. GridView.extent 构造函数，可随着屏幕宽度伸缩
      body: GridView.extent(
        // 侧轴（横向）最大宽度
        maxCrossAxisExtent: 100,
        // 宽高比，横向暂4份，众向张2份
        childAspectRatio: 4 / 2,
        // 侧轴方向的间距
        crossAxisSpacing: 10,
        // 主轴方向的间距
        mainAxisSpacing: 20,
        children: [
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('Flutter程序员1'),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('Flutter程序员2'),
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('Flutter程序员3'),
          ),
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('Flutter程序员4'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('Flutter程序员5'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('Flutter程序员6'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('Flutter程序员7'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('Flutter程序员7'),
          ),
          Container(
            color: Colors.purple,
            alignment: Alignment.center,
            child: const Text('Flutter程序员7'),
          ),
        ],
      ),
    );
  }
}
